import React from 'react'
import { Modal } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import { handlingDialogs } from '@/store/models/app'
import styles from './index.module.less'

const ConfirmDialog = () => {
  const { visible, title, onOk, onCancel, okText, cancelText, content } = useSelector((store: RootState) => store.app.confirmDialog)
  const dispatch = useDispatch()
  const handleOk = async (callback: any) => {
    if (!callback) {
      handleCloseDialog()
      return
    }
    await callback()
    handleCloseDialog()
  }

  const handleCloseDialog = () => {
    dispatch(
      handlingDialogs({
        visible: false,
        title: '标题',
        onOk: null,
        onCancel: null,
        okText: '确认',
        cancelText: '取消',
        content: ''
      })
    )
  }

  return (
    <Modal
      className={styles.confirmDialog}
      visible={visible}
      title={title}
      onOk={() => {
        handleOk(onOk)
      }}
      onCancel={() => {
        handleOk(onCancel)
      }}
      cancelText={cancelText}
      okText={okText}
      zIndex={10000}
      maskClosable={false}>
      {content}
    </Modal>
  )
}
export default ConfirmDialog
